<template>
  <div class="details-layout">
    <div class="header-box">
      <mt-header title="" :fixed="true" class="header">
        <mt-button slot="left" icon="back" class="header-left-button" @click.stop="back()">{{leftTitle}}</mt-button>
      </mt-header>
      <img :src="headerImageUrl" v-if="headerImageUrl" class="top-img">
    </div>
    <div class="details-body"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loadStop"
         infinite-scroll-distance="10"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
  /**
   * @desc 详情头部导航 固定顶部
   * @param {string} [left-title] - 左侧返回出标题
   * @param {string} [header-image-url] - 中间图片标题URL
   */
  export default {
    name: 'details-layout',
    components: {},
    directives: {},
    mixins: [],
    props: {
      leftTitle: {
        type: String,
        default: ''
      },
      headerImageUrl: {
        type: String,
        default: ''
      },
      loadStop: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false
      }
    },
    computed: {},
    watch: {},
    methods: {
      /**
       * 后退
       */
      back() {
        this.$router.back(-1)
      },
      /**
       * 滚到底了
       */
      loadMore() {
        this.$emit('on-scroll-bottom')
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .details-layout {
    overflow: hidden;
    .header-box {
      position: fixed;
      height: 3.5rem;
      width: 100%;
      top: 0;
      left: 0;
      text-align: center;
      background: #5077aa;
      z-index: 9999;
      .header {
        background: transparent;
        height: 3.5rem;
        z-index: 998;
        font-size: 1.3rem;
        line-height: 1;
        padding-left: 1rem;
      }
      .top-img {
        height: 3rem;
        margin: .25rem;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        border-radius: .1rem;
        z-index: 999;
      }
    }

    .details-body {
      padding-top: 3.5rem;
      height: 100%;
      background-color: #fff;
      overflow: auto;
    }
  }
</style>
